<template>
  <div class="chart-control-tree-first-item">
    <div class="u-logo">{{ name ? name.slice(0, 1) : '' }}</div>
    <div class="u-name">{{ name }}</div>
    <el-icon class="u-angle"><DArrowRight /></el-icon>
    <div class="u-line"></div>
  </div>
</template>

<script setup>
defineProps({
  name: String,
})
</script>

<style lang="stylus" scoped>
.chart-control-tree-first-item
  display flex
  align-items center
  .u-logo
    margin-right: 8px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    background: #766ce5;
    border-radius: 6px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-align: center;
  .u-name
    margin-right: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #2970f6;
  .u-angle
    margin-right 6px
  .u-line
    width 60px
    height 0
    border .5px dashed rgba(97,105,152,.6)
</style>
